<template>
    <div class="mobileWrap">
        <template v-if="!loading">
            <template v-if="Object.keys(itemInfo).length > 0">
                <div class="mobileWrap-page">
                    <div class="mobileWrap-page-header">机柜信息</div>
                    <div class="mobileWrap-page-content">
                        <a-space direction="vertical" style="width: 100%;" size="middle">
                            <div class="mobileWrap-page-content-itemWrap backBoxWrap" v-for="item in cabinetInfo"
                                :key="item.value">
                                <div class="mobileWrap-page-content-itemWrap-head ">
                                    <a-space>
                                        <span class="title">{{ item.label }}</span>
                                    </a-space>
                                    <div class="extra">
                                        <!-- <span :class="itemInfo.status == '已巡检' ? 'yesClass' : 'noneClass'">{{
                                        itemInfo.status }}</span> -->
                                        {{ itemInfo['cabinet'][item.value] }}
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="mobileWrap-page-content-itemWrap" v-if="itemInfo.publishEntry"
                            @click="goUrl(itemInfo.publishEntry)">
                            <div class="mobileWrap-page-content-itemWrap-button">
                                <a-button block type="primary" size="large">流程发起入口</a-button>
                            </div>
                        </div> -->
                            <!-- <div class="mobileWrap-page-content-itemWrap">
                            <div class="mobileWrap-page-content-itemWrap-row">
                                <span class="mobileWrap-page-content-itemWrap-row-title">灭火器信息</span>
                            </div>
                        </div> -->
                            <!-- <div class="mobileWrap-page-content-itemWrap backBoxWrap mhqClass"> -->
                            <!-- <a-space direction="vertical">
                                <div class="info"
                                    :class="index != staticList.filter(v => itemInfo.info[v.value]).length - 1 ? 'borderClass' : ''"
                                    v-for="(item, index) in staticList.filter(v => itemInfo.info[v.value])"
                                    :key="item.value">
                                    <span class="info-head">{{ item.label }}</span>
                                    <span class="info-content">{{ itemInfo.info[item.value] }}</span>
                                </div>
                            </a-space> -->
                            <!-- </div> -->
                        </a-space>
                    </div>
                </div>
                <div class="mobileWrap-list">
                    <a-table :columns="cabinetColumns" :pagination="false" :data-source="itemInfo.machines"
                        :scroll="{ y: 'calc(100vh - 24px - 302px)', x: '100%' }" size="small">
                        <span slot="connections" slot-scope="item">
                            <template v-if="Array.isArray(item) && item.length > 0">
                                <Modal :item="item"></Modal>
                            </template>
                            <template v-else>--</template>
                        </span>
                    </a-table>
                </div>
            </template>
            <div v-else>
                <a-empty></a-empty>
            </div>
        </template>
        <template v-else>
            <a-spin :spinning="loading" class="spin"></a-spin>
        </template>
    </div>
</template>
<script>
import { cabinetInfo, cabinetColumns } from './js/js'
import Modal from './components/modal.vue';
export default {
    name: 'list',
    components: {
        Modal,
    },
    data() {
        return {
            loading: false,
            urlData: {},
            itemInfo: {},
            isShowList: false,
            cabinetInfo,
            cabinetColumns,
        }
    },
    methods: {
        getInfo(e) {
            let params = {
                ...this.urlData,
                ...e,
            };
            this.loading = true;
            this.getAxios(this.$MobileInfo, params).then((res) => {
                if (res.code == 200) {
                    this.itemInfo = res.data;
                }
            }).catch(() => {
            }).finally(() => {
                this.loading = false;
            })
        },
        changIsShow() {
            this.isShowList = !this.isShowList;
        },
        goUrl(u) {
            window.location.href = u;
        }
    },
    mounted() {
        let routeInfo = this.$route;
        this.urlData = routeInfo.query;
        this.getInfo(this.urlData);
    },
    created(){
        document.title = `山东港口科技集团机房设备`;
    }
}
</script>
<style lang="less" scoped>
.mobileWrap {
    font-family: AlibabaPuHuiTi;
    background-color: #F4F4F4;
    height: 100%;
    width: 100%;
    min-height: 100vh;
    padding: 12px;
    overflow-y: auto;

    .backBoxWrap {
        background-color: #ffffff;
        padding: 6px 12px;
        border-radius: 4px;
        box-shadow: 0px 0px 8px 0px #cdcdcd;

        .title,
        .subTitle {
            font-weight: 560;
            font-size: 16px;
        }

        .extra {
            .yesClass {
                color: green;
            }

            .noneClass {
                background-color: orange;
            }
        }

        .infoText {
            color: #A1A1A1;
        }
    }

    &-page {
        &-header {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            margin: 0px 0px 6px 0px;
        }

        &-content {
            &-itemWrap {
                &-head {
                    display: flex;
                    justify-content: space-between;
                    position: sticky;
                    align-items: center;
                    top: 0px;
                }

                &-content {
                    margin-top: 12px;

                    // 时间线
                    .timeline {
                        &-head {}

                        &-content {
                            font-size: 16px;
                        }
                    }

                    .timelineButton {
                        min-height: 36px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #F8F8F8;
                    }
                }

                &-row {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    // 灭火器信息
                    &-title {
                        padding: 4px 12px;
                        background-color: #EAEDF4;
                        color: #54677B;
                        border-radius: 8px;
                        font-size: 20px;
                    }
                }

                // 流程发起入口
                &-button {
                    ::v-deep {
                        .ant-btn {
                            font-size: 20px;
                            background-color: green;
                        }
                    }
                }

            }

            .mhqClass {
                ::v-deep {

                    .ant-space,
                    .ant-space-item {
                        width: 100%;
                    }
                }

                // 灭火器信息
                .info {
                    display: flex;
                    flex-direction: column;
                    width: 100%;

                    &-head {
                        color: #BEC1C5;
                    }

                    &-content {
                        margin-top: 4px;
                        font-size: 18px;
                        padding: 4px 0px;
                    }
                }

                .borderClass {
                    border-bottom: 1px solid #cdcdcdAA;
                    padding-bottom: 8px;
                }
            }

            ::v-deep {
                .ant-timeline-item-last>.ant-timeline-item-content {
                    min-height: 0px;
                }
            }
        }
    }

    &-list {
        height: calc(100vh - 24px - 250px);
        overflow: auto;
        // background: pink;
        margin-top: 12px;
    }

    .spin {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>